'use client'

import { useState } from 'react'
import ComicDisplay from '@/components/ComicDisplay'
import { ComicPanel } from '@/types/story'

export default function DemoPage() {
  const [demoPanels] = useState<ComicPanel[]>([
    {
      id: 'panel-1',
      imageUrl: 'https://via.placeholder.com/1024x1024/FFB6C1/FFFFFF?text=Panel+1',
      caption: '从前有一只小兔子，它非常喜欢交朋友。有一天，它在森林里遇到了一只受伤的小鸟...',
      englishCaption: 'Once upon a time, there was a little rabbit who loved making friends...',
      order: 1,
    },
    {
      id: 'panel-2',
      imageUrl: 'https://via.placeholder.com/1024x1024/87CEEB/FFFFFF?text=Panel+2',
      caption: '小兔子立刻跑过去帮助小鸟，给它找来食物和水。小鸟很快就康复了...',
      englishCaption: 'The little rabbit immediately ran to help the bird, bringing it food and water...',
      order: 2,
    },
    {
      id: 'panel-3',
      imageUrl: 'https://via.placeholder.com/1024x1024/98FB98/FFFFFF?text=Panel+3',
      caption: '它们成为了最好的朋友。从那以后，小兔子和小鸟总是在一起玩耍...',
      englishCaption: 'They became the best of friends. From then on, they always played together...',
      order: 3,
    },
    {
      id: 'panel-4',
      imageUrl: 'https://via.placeholder.com/1024x1024/DDA0DD/FFFFFF?text=Panel+4',
      caption: '它们的故事告诉我们，真正的友谊是互相帮助和关心。',
      englishCaption: 'Their story teaches us that true friendship is about helping and caring for each other.',
      order: 4,
    },
  ])

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-4">
              卡通漫画功能演示
            </h1>
            <p className="text-lg text-gray-600">
              这是一个演示页面，展示卡通漫画的浏览功能
            </p>
          </div>
          
          <ComicDisplay 
            panels={demoPanels}
            title="小兔子的友谊"
            englishTitle="Little Rabbit's Friendship"
          />
          
          <div className="mt-8 text-center">
            <a 
              href="/"
              className="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
            >
              返回主页
            </a>
          </div>
        </div>
      </div>
    </div>
  )
} 